<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.forgot.password.title}"></title>
    <script th:inline="javascript">
        $(function () {
            // 密码强度检测函数
            function checkPasswordStrength(password) {
                var strength = 0;
                if (password.length >= 6) strength += 1;
                if (/[A-Z]/.test(password)) strength += 1;
                if (/[a-z]/.test(password)) strength += 1;
                if (/[0-9]/.test(password)) strength += 1;
                if (/[^A-Za-z0-9]/.test(password)) strength += 1;
                return strength;
            }

            // 监听新密码输入，实时显示强度提示
            $("input[name='newPassword']").on("input", function() {
                var pwd = $(this).val();
                var strength = checkPasswordStrength(pwd);
                var tip = "";
                if (pwd.length === 0) {
                    tip = "";
                } else if (strength < 3) {
                    tip = "密码强度较弱，建议包含大小写字母、数字和特殊字符";
                } else if (strength < 5) {
                    tip = "密码强度中等，可进一步优化";
                } else {
                    tip = "密码强度高，很安全";
                }
                // 动态插入/移除提示
                var $tip = $(this).next(".password-strength-tip");
                if ($tip.length) {
                    $tip.text(tip);
                } else {
                    $(this).after('<span class="password-strength-tip" style="color: #666; font-size: 0.875rem; display: block;">' + tip + '</span>');
                }
            }).on("blur", function() {
                $(this).next(".password-strength-tip").remove();
            });

            // 发送验证码逻辑（带加载状态）
            $("#send-code-btn").click(function() {
                var email = $("#email").val();
                var $btn = $(this);
                if (!email) {
                    message(/*[[#{login.email.required}]]*/'');
                    return;
                }
                $btn.attr("disabled", true).text("发送中...");
                $.ajax({
                    url: /*[[@{/login/sendResetCode}]]*/'',
                    type: 'post',
                    data: {email: email},
                    success: function(data) {
                        message(data.msg);
                    },
                    complete: function() {
                        $btn.attr("disabled", false).text([[#{login.send.code}]]);
                    }
                });
            });

            // 提交重置密码逻辑（带加载状态）
            $("#reset-form").submit(function(e) {
                e.preventDefault();
                var $submitBtn = $(this).find('button[type="submit"]');
                $submitBtn.attr("disabled", true).text("重置中...");
                $.ajax({
                    url: /*[[@{/login/resetPassword}]]*/'',
                    type: 'post',
                    data: $(this).serialize(),
                    success: function(data) {
                        message(data.msg);
                        if (data.success) {
                            setTimeout(function() {
                                window.location.href = /*[[@{/login/login}]]*/'';
                            }, 1500);
                        }
                    },
                    complete: function() {
                        $submitBtn.attr("disabled", false).text([[#{login.reset.password}]]);
                    }
                });
            });
        });
    </script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f8f9fa;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .form-horizontal {
            width: 400px;
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        .form-group {
            margin-bottom: 1.75rem;
        }
        label {
            font-weight: 500;
            margin-bottom: 0.6rem;
            display: block;
            color: #333;
        }
        .input-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .form-control {
            width: 100%;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .form-control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
        }
        .btn {
            padding: 0.375rem 1rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            border: none;
            cursor: pointer;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: #fff;
        }
        .btn-secondary:hover {
            background-color: #5a6268;
        }
        .btn-primary {
            background-color: #007bff;
            color: #fff;
            width: 100%;
        }
        .btn-primary:hover {
            background-color: #0069d9;
        }
        .password-strength-tip {
            margin-top: 4px;
            line-height: 1.2;
        }
        @media (max-width: 576px) {
            .form-horizontal {
                width: calc(100% - 40px);
                margin: 0 20px;
            }
        }
    </style>
</head>
<body>
<form id="reset-form" class="form-horizontal">
    <div class="form-group">
        <label th:text="#{login.user.email}"></label>
        <input type="email" id="email" name="email" class="form-control" required>
    </div>
    <div class="form-group">
        <label th:text="#{login.verify.code}"></label>
        <div class="input-group">
            <input type="text" name="code" class="form-control" required>
            <button type="button" id="send-code-btn" class="btn btn-secondary">
                [[#{login.send.code}]]
            </button>
        </div>
    </div>
    <div class="form-group">
        <label th:text="#{login.new.password}"></label>
        <input type="password" name="newPassword" class="form-control" required
               pattern="^.{6,}$" th:title="#{login.password.pattern}">
    </div>
    <button type="submit" class="btn btn-primary" th:text="#{login.reset.password}"></button>
</form>
</body>
</html>